<template>
  <div class="container">
    <div class="container-top">
      <div class="container-top-top">
        <img src="//s0.meituan.net/bs/fe-web-meituan/fa5f0f0/img/logo.png" alt="注册">
        <div class="container-top-top-right">
          <span>已有美团账号？</span>
          <div @click="jumpLogin">登陆</div>
        </div>
      </div>
    </div>
    <div class="container-center">
      <div>
        <span>手机号</span>
        <input ref="phoneInput" @blur="phoneBlur" v-model="phone" type="number">
        <div v-show="errorPhone.length" class="tips">
          <i class="iconfont">&#xe613;</i>
          <div class="tips-message">{{errorPhone}}</div>
        </div>  
      </div>
      <div>
        <span>创建密码</span>
        <input ref="passInput" @blur="passBlur" v-model="password" type="password">
        <div v-show="errorPass.length" class="tips">
          <i class="iconfont">&#xe613;</i>
          <div class="tips-message">{{errorPass}}</div>
        </div>  
      </div>
      <div>
        <span>确认密码</span>
        <input @keyup.enter="register" ref="passResetInput" @blur="passResetBlur" v-model="passwordReset" type="password">
        <div v-show="errorPassReset.length" class="tips">
          <i class="iconfont">&#xe613;</i>
          <div class="tips-message">{{errorPassReset}}</div>
        </div>  
      </div>
      <div @click="register" class="button">
        同意以下协议并注册
      </div>
      <div class="term">
        <a class="f1" href="https://rules-center.meituan.com/rules-detail/4" target="_blank">《美团点评用户服务协议》</a>
        <a class="f1" href="https://rules-center.meituan.com/rules-detail/2" target="_blank">《美团点评隐私政策》</a>
      </div>
    </div>
    <div class="container-bottom">
       <CommonFooter/>
    </div>
  </div>
</template>

<script>
import CommonFooter from '../Common/commonFooter'
export default {
  name: 'Register',
  data() {
    return {
      /** 电话号 */
      phone: '',
      /** 密码 */
      password: '',
      /** 再次输入密码 */
      passwordReset: '',
      /** 手机号的错误信息 */
      errorPhone: '',
      /** 密码的错误信息 */
      errorPass: '',
      /** 再次输入密码的错误信息 */
      errorPassReset: ''
    }
  },
  methods: {
    /** 再次输入密码的失焦事件 */
    passResetBlur() {
      if (this.passwordReset) {
        if (this.passwordReset === this.password) {
          this.errorPassReset = ''
          this.$refs.passResetInput.style.borderColor = '#aaa'
        } else {
          this.errorPassReset = '两次输入的密码不一致'
          this.$refs.passResetInput.style.borderColor = '#F76120'
        }
      }
      else {
        this.errorPassReset = '请再次输入密码'
        this.$refs.passResetInput.style.borderColor = '#F76120'
      }
    },
    /** 密码的失焦事件 */
    passBlur() {
      if (this.password) {
        this.errorPass = ''
        this.$refs.passInput.style.borderColor = '#aaa'
      } else {
        this.errorPass = '请输入密码'
        this.$refs.passInput.style.borderColor = '#F76120'
      }
    },
    /** 手机号的失焦事件 */
    phoneBlur() {
      let reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/
      if (this.phone) {
        if(reg.test(this.phone)) {
          this.errorPhone = ''
          this.$refs.phoneInput.style.borderColor = '#aaa'
        }
        else {
          this.errorPhone = '请输入正确的手机号'
          this.$refs.phoneInput.style.borderColor = '#F76120'
        }
      } else {
        this.errorPhone = '请输入手机号'
        this.$refs.phoneInput.style.borderColor = '#F76120'
      }
    },
    /** 跳转登录 */
    jumpLogin() {
      this.$router.push('/login')
    },
    /** 注册 */
    async register() {
      let res = await this.$api.register({ phone: this.phone, password: this.password })
      let { code, msg } = res
      code === 0 ? 
        this.messageTips('success', msg) :
        this.messageTips('error', msg)
    },
    /** 提示 */
    messageTips(type, msg) {
      this.$Message[type]({
        background: true,
        content: msg
      })
    }
  },
  components: {
    CommonFooter
  }
}
</script>

<style lang="scss" scoped>
@import 'scss/common.scss';
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    &-top {
      width: 100%;
      height: 80px;
      border-bottom: 1.5px solid #D8D8D8;
       &-top {
        width: 45%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        margin: 0 auto;
        img {
          width: 110px;
          height: 50px;
        }
        &-right {
          display: flex;
          span {
            font-size: 16px;
            color: #666;
            margin-top: 10px;
          }
          div {
            cursor: pointer;
            margin-left: 15px;
            color: #222;
            background-image: linear-gradient(135deg,#FFD000 0,#FFBD00 100%);
            border-width: 0;
            box-shadow: 0 2px 1px rgba(191,105,0,.15);
            background-size: 100%;
            padding: 7px 12px;
          }
        }
      } 
    }
    &-center {
      width: 45%;
      margin: 0 auto;
      padding-top: 50px;
      box-sizing: border-box;
      div {
        display: flex;
        align-items: center;
        .tips {
          margin-left: 5px;
          margin-top: 0 !important;
          .iconfont {
            color: #FF8800;
            font-size: 16px;
          }
          &-message {
            margin-top: 0 !important;
            color: #999;
            margin-left: 2px;
            font-size: 13px;
          }
        }
        span {
          display: flex;
          width: 80px;
          font-size: 15px;
          justify-content: flex-end;
          margin-right: 15px;
        }
        input {
          width: 278px;
          height: 38px;
          padding: 5px;
          border: 1px solid #aaa;
          line-height: 24px;
          vertical-align: top;
          &:focus {
            border: 1px solid #FE8C00;
          }
        }
      }
      div:nth-child(2) {
        margin-top: 20px;
      }
      div:nth-child(3) {
        margin-top: 20px;
      }
      .button {
        @include flex-center;
        cursor: pointer;
        color: #222;
        background-image: linear-gradient(135deg,#FFD000 0,#FFBD00 100%);
        border-width: 0;
        box-shadow: 0 2px 1px rgba(191,105,0,.15);
        background-size: 100%;
        width: 200px;
        height: 40px;
        font-size: 15px;
        font-weight: bold;
        margin-top: 20px;
        margin-left: 95px;
      }
      .term {
        display: flex;
        margin-top: 20px;
        margin-left: 95px;
        a {
          color: #FE8C00;
          text-decoration: none;
          font-size: 13px;
        }
      }
    }
    &-bottom {
      margin-top: 40px;
      border-top: 1px solid #D8D8D8;
      @include flex-center;
      width: 100%;
    }
  }
</style>